CSS எழுத்து-முறை பற்றிய ஒரு முழுமையான வழிகாட்டி. இது சர்வதேசமயமாக்கலுக்கான (i18n) உரை திசையைக் கட்டுப்படுத்துவது மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய, உலகளவில் அணுகக்கூடிய வலைத்தளங்களை உருவாக்குவது எப்படி என்பதை விளக்குகிறது.
CSS எழுத்து முறை: உலகளாவிய வலைத்தளங்களுக்கான சர்வதேச உரை திசையை கையாளுதல்
இன்றைய இணைக்கப்பட்ட உலகில், வலைத்தளங்கள் ஒரு பன்முக பார்வையாளர்களை ஈர்க்க வேண்டும், அதன் ஒரு முக்கிய அம்சம் வெவ்வேறு உரை திசைகளைக் கையாள்வதுதான். CSS writing-mode என்பது ஒரு சக்திவாய்ந்த கருவியாகும், இது டெவலப்பர்களுக்கு உரை பாயும் திசையைக் கட்டுப்படுத்த அனுமதிக்கிறது, உண்மையான சர்வதேசமயமாக்கப்பட்ட (i18n) மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வலை அனுபவங்களை உருவாக்க உதவுகிறது. இந்த விரிவான வழிகாட்டி writing-mode இன் நுணுக்கங்களை ஆராய்ந்து, உலகளாவிய வலைத்தளங்களுக்கான உரை திசையை நீங்கள் கையாள உதவும் நடைமுறை எடுத்துக்காட்டுகள் மற்றும் செயல்படக்கூடிய நுண்ணறிவுகளை வழங்கும்.
எழுத்து முறைகளைப் புரிந்துகொள்ளுதல்
writing-mode CSS பண்புக்கூறு, உரையின் வரிகள் கிடைமட்டமாகவா அல்லது செங்குத்தாகவா அமைக்கப்பட்டுள்ளன என்பதையும், தொகுதிகள் எந்த திசையில் முன்னேறுகின்றன என்பதையும் குறிப்பிடுகிறது. இது வெவ்வேறு எழுத்து திசைகளைப் பயன்படுத்தும் மொழிகளுக்கான வலைப்பக்கங்களை மாற்றியமைப்பதில் முக்கிய பங்கு வகிக்கிறது, அவை:
- இடமிருந்து-வலம் (LTR): ஆங்கிலம், ஸ்பானிஷ், பிரெஞ்சு, ஜெர்மன், மற்றும் பல மேற்கத்திய மொழிகள்.
- வலமிருந்து-இடமாக (RTL): அரபு, ஹீப்ரு, பாரசீகம், மற்றும் உருது.
- செங்குத்து: பாரம்பரிய சீனம், ஜப்பானியம், மற்றும் மங்கோலியம்.
இயல்பாக, வலை உலாவிகள் horizontal-tb எழுதும் முறையைப் பயன்படுத்துகின்றன, இது உரையை கிடைமட்டமாக மேலிருந்து கீழாக அமைக்கிறது. இருப்பினும், writing-mode இந்த இயல்புநிலை நடத்தையை மாற்றி, வெவ்வேறு உரை திசைகளுக்கு இடமளிக்கும் தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது.
writing-mode பண்புக்கூறின் மதிப்புகள்
writing-mode பண்புக்கூறு பல மதிப்புகளை ஏற்றுக்கொள்கிறது, ஒவ்வொன்றும் வெவ்வேறு உரை திசையையும் தொகுதி ஓட்டத்தையும் குறிப்பிடுகின்றன:
horizontal-tb: கிடைமட்டமாக மேலிருந்து கீழாக. உரையின் வரிகள் கிடைமட்டமாக இருக்கும் மற்றும் மேலிருந்து கீழாகப் பாயும். இது இயல்புநிலை மதிப்பாகும்.vertical-rl: செங்குத்தாக வலமிருந்து இடமாக. உரையின் வரிகள் செங்குத்தாக இருக்கும் மற்றும் வலமிருந்து இடமாகப் பாயும். தொகுதிகள் கீழ்நோக்கி முன்னேறும்.vertical-lr: செங்குத்தாக இடமிருந்து வலமாக. உரையின் வரிகள் செங்குத்தாக இருக்கும் மற்றும் இடமிருந்து வலமாகப் பாயும். தொகுதிகள் கீழ்நோக்கி முன்னேறும்.sideways-rl:vertical-rl-க்கு வழக்கொழிந்த மாற்றுப்பெயர்.sideways-lr:vertical-lr-க்கு வழக்கொழிந்த மாற்றுப்பெயர்.
பின்வரும் மதிப்புகளும் கிடைக்கின்றன ஆனால் குறைவாகவே பயன்படுத்தப்படுகின்றன:
block-flow: தொகுதி வடிவமைப்பு சூழலின் திசையைப் பயன்படுத்தவும், இது மற்ற பண்புகளால் பாதிக்கப்படலாம்.
அடிப்படை எடுத்துக்காட்டுகள்
writing-mode இன் பயன்பாட்டை சில எளிய எடுத்துக்காட்டுகளுடன் விளக்குவோம்:
கிடைமட்ட உரை (இயல்புநிலை)
இது இயல்புநிலை நடத்தை, எனவே வெளிப்படையான writing-mode தேவையில்லை:
<p>This is horizontal text.</p>
செங்குத்து உரை (வலமிருந்து-இடமாக)
உரையை செங்குத்தாக வலமிருந்து இடமாக காட்ட, vertical-rl ஐப் பயன்படுத்தவும்:
<p style="writing-mode: vertical-rl;">This is vertical text (right-to-left).</p>
செங்குத்து உரை (இடமிருந்து-வலமாக)
உரையை செங்குத்தாக இடமிருந்து வலமாக காட்ட, vertical-lr ஐப் பயன்படுத்தவும்:
<p style="writing-mode: vertical-lr;">This is vertical text (left-to-right).</p>
writing-mode இன் நடைமுறைப் பயன்பாடுகள்
அடிப்படை உரை திசைக்கு அப்பால், பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் சர்வதேச அளவில் அணுகக்கூடிய வலைத்தளங்களை உருவாக்குவதற்கு writing-mode பல நடைமுறைப் பயன்பாடுகளை வழங்குகிறது:
1. RTL மொழிகளுக்கு ஏற்ப மாற்றுதல்
அரபு அல்லது ஹீப்ரு போன்ற RTL மொழிகளை ஆதரிக்கும் வலைத்தளங்களுக்கு, உரையை சரியாகக் காண்பிக்க writing-mode அவசியம். மொழி பண்புக்கூறின் அடிப்படையில் குறிப்பிட்ட உறுப்புகளுக்கு அல்லது முழு ஆவணத்திற்கும் writing-mode: rtl; ஐப் பயன்படுத்த CSS தேர்வுகளைப் பயன்படுத்தலாம்:
<html lang="ar">
<body>
<p>هذا نص عربي.</p>
</body>
</html>
html[lang="ar"] {
direction: rtl;
unicode-bidi: bidi-override;
}
அடிப்படை திசையை அமைக்க direction: rtl; முக்கியமானது என்றாலும், கலப்பு-திசை உரையை சரியாகக் கையாள unicode-bidi: bidi-override; உங்களுக்குத் தேவைப்படலாம். நவீன அணுகுமுறைகள் பெரும்பாலும் தர்க்கரீதியான பண்புகளை விரும்புகின்றன, அவை பின்னர் விவாதிக்கப்படும்.
2. செங்குத்து வழிசெலுத்தல் மெனுக்களை உருவாக்குதல்
writing-mode ஐ செங்குத்து வழிசெலுத்தல் மெனுக்களை உருவாக்கப் பயன்படுத்தலாம், அவை பெரும்பாலும் ஜப்பானிய மற்றும் சீன வலைத்தளங்களில் காணப்படுகின்றன. இது உங்கள் தளத்திற்கு ஒரு தனித்துவமான காட்சிப் பொலிவைச் சேர்க்கும்:
<ul class="vertical-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
.vertical-menu {
list-style: none;
padding: 0;
margin: 0;
}
.vertical-menu li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
writing-mode: vertical-rl;
text-orientation: upright;
}
இந்த எடுத்துக்காட்டில், செங்குத்து மெனு உருப்படிகளுக்குள் உள்ள உரை சுழற்றப்படுவதற்குப் பதிலாக நிமிர்ந்து காட்டப்படுவதை உறுதிசெய்ய text-orientation: upright; பயன்படுத்தப்படுகிறது.
3. பத்திரிக்கை-பாணி தளவமைப்புகளை வடிவமைத்தல்
writing-mode ஐ பத்திரிக்கை-பாணி தளவமைப்புகளை அடைய இணைக்கலாம். உதாரணமாக, ஒரு பெரிய படத்தின் மேல் செங்குத்து உரையை வைத்து ஒரு அற்புதமான காட்சி விளைவை உருவாக்கலாம்.
<div class="magazine-section">
<img src="image.jpg" alt="Magazine Image">
<div class="vertical-text">Exclusive Interview</div>
</div>
.magazine-section {
position: relative;
width: 500px;
height: 300px;
}
.magazine-section img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text {
position: absolute;
top: 0;
right: 10px;
color: white;
font-size: 2em;
writing-mode: vertical-rl;
text-orientation: upright;
transform-origin: top right;
transform: rotate(180deg); /* Required to render correctly across browsers */
}
பல்வேறு உலாவிகளில், குறிப்பாக பழைய பதிப்புகளில், சீரான ரெண்டரிங்கை உறுதிப்படுத்த transform: rotate(180deg); பெரும்பாலும் அவசியமாகிறது.
4. தரவுக் காட்சிப்படுத்தலை மேம்படுத்துதல்
தரவுக் காட்சிப்படுத்தலில், விளக்கப்படங்கள் மற்றும் வரைபடங்களில் அச்சுகளை லேபிளிட writing-mode பயனுள்ளதாக இருக்கும், குறிப்பாக இடம் குறைவாக இருக்கும்போது. உதாரணமாக, செங்குத்து அச்சில் உள்ள லேபிள்கள் ஒன்றின் மேல் ஒன்று வராமல் தடுக்க அவற்றைச் சுழற்றலாம்.
மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்
writing-mode இன் முழு சக்தியையும் பயன்படுத்த, இந்த மேம்பட்ட நுட்பங்களையும் முக்கியமான காரணிகளையும் கருத்தில் கொள்ளுங்கள்:
1. தர்க்கரீதியான பண்புகள் மற்றும் மதிப்புகள்
நவீன CSS தர்க்கரீதியான பண்புகளையும் மதிப்புகளையும் அறிமுகப்படுத்துகிறது, இது தளவமைப்பு மற்றும் திசையைக் கையாள மிகவும் நெகிழ்வான மற்றும் அர்த்தமுள்ள வழியை வழங்குகிறது. left மற்றும் right போன்ற இயற்பியல் பண்புகளுக்குப் பதிலாக, start மற்றும் end போன்ற தர்க்கரீதியான பண்புகள் பயன்படுத்தப்படுகின்றன, அவை எழுத்து திசைக்கு ஏற்ப மாறுகின்றன. உதாரணமாக:
margin-inline-start: LTR இல்margin-leftமற்றும் RTL இல்margin-rightக்கு சமமானது.padding-block-start: கிடைமட்ட எழுத்து முறைகளில்padding-topமற்றும் செங்குத்து எழுத்து முறைகளில்padding-leftஅல்லதுpadding-rightக்கு சமமானது.
தர்க்கரீதியான பண்புகளைப் பயன்படுத்துவது உங்கள் CSS ஐ மிகவும் மாற்றியமைக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது, குறிப்பாக பல எழுத்து திசைகளைக் கையாளும் போது.
2. writing-mode ஐ மற்ற CSS பண்புகளுடன் இணைத்தல்
writing-mode ஆனது text-orientation, direction, மற்றும் unicode-bidi போன்ற மற்ற CSS பண்புகளுடன் ஊடாடி, உரையின் தோற்றத்தையும் நடத்தையையும் கட்டுப்படுத்துகிறது. விரும்பிய முடிவுகளை அடைய இந்த ஊடாட்டங்களைப் புரிந்துகொள்வது முக்கியம்.
text-orientation: செங்குத்து எழுத்து முறைகளில் எழுத்துக்களின் நோக்குநிலையைக் குறிப்பிடுகிறது. மதிப்புகளில்upright,sideways,mixed, மற்றும்use-glyph-orientationஆகியவை அடங்கும்.direction: உரையின் அடிப்படை திசையைக் (LTR அல்லது RTL) குறிப்பிடுகிறது.unicode-bidi: யூனிகோட் இருதிசை நெறிமுறை உறுப்புக்கு எவ்வாறு பயன்படுத்தப்படுகிறது என்பதைக் கட்டுப்படுத்துகிறது.
3. கலப்பு-திசை உரையைக் கையாளுதல்
LTR மற்றும் RTL எழுத்துக்கள் இரண்டையும் கொண்ட உரையைக் கையாளும்போது (எ.கா., ஒரு அரபு பத்தியில் ஆங்கில உரை), சரியான ரெண்டரிங்கை உறுதிப்படுத்த unicode-bidi பண்பைப் பயன்படுத்துவது முக்கியம். ஒரு குறிப்பிட்ட திசையை கட்டாயப்படுத்த bidi-override மதிப்பு அடிக்கடி பயன்படுத்தப்படுகிறது.
<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>
4. எழுத்துரு பரிசீலனைகள்
எல்லா எழுத்துருக்களும் செங்குத்து எழுத்துக்கு ஏற்றவை அல்ல. சில எழுத்துருக்களில் செங்குத்து எழுத்திற்கான கிளிஃப்கள் இல்லாமல் இருக்கலாம் அல்லது சரியாக ரெண்டர் ஆகாமல் இருக்கலாம். செங்குத்து எழுத்து முறைகளைப் பயன்படுத்தும்போது, செங்குத்து உரைக்காக பிரத்யேகமாக வடிவமைக்கப்பட்ட அல்லது செங்குத்து கிளிஃப்களுக்கு நல்ல ஆதரவைக் கொண்ட எழுத்துருக்களைத் தேர்ந்தெடுக்கவும்.
கிழக்கு ஆசிய நாடுகளின் (சீனா, ஜப்பான், கொரியா) எழுத்துருக்கள் பொதுவாக செங்குத்து எழுத்துக்கு மிகச் சிறந்த ஆதரவைக் கொண்டுள்ளன.
5. அணுகல்தன்மை
உங்கள் writing-mode பயன்பாடு அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். படங்கள் மற்றும் பிற உரை அல்லாத உள்ளடக்கத்திற்கு மாற்று உரையை வழங்கவும், மேலும் மாற்றுத்திறனாளி பயனர்களுக்கு உரை படிக்கக்கூடியதாகவும் புரிந்துகொள்ளக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்தவும். அணுகல்தன்மையை மேம்படுத்த செமண்டிக் HTML கூறுகள் மற்றும் ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.
6. உலாவி இணக்கத்தன்மை
writing-mode நவீன உலாவிகளில் நல்ல ஆதரவைக் கொண்டுள்ளது, ஆனால் பழைய உலாவிகளுக்கு விற்பனையாளர் முன்னொட்டுகள் (எ.கா., -webkit-writing-mode, -ms-writing-mode) தேவைப்படலாம். விற்பனையாளர் முன்னொட்டுகளைச் சேர்ப்பதை தானியக்கமாக்க Sass அல்லது Less போன்ற ஒரு CSS ப்ரீப்ராசசரைப் பயன்படுத்தவும் அல்லது Autoprefixer போன்ற ஒரு கருவியைப் பயன்படுத்தவும்.
writing-mode ஐப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்
writing-mode ஐ திறம்படப் பயன்படுத்தவும், உலகளவில் அணுகக்கூடிய வலைத்தளங்களை உருவாக்கவும், இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:
- முடிந்தபோதெல்லாம் தர்க்கரீதியான பண்புகளையும் மதிப்புகளையும் பயன்படுத்தவும். இது உங்கள் CSS ஐ மிகவும் மாற்றியமைக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் மாற்றும்.
- செங்குத்து எழுத்து முறைகளுக்கு பொருத்தமான எழுத்துருக்களைத் தேர்ந்தெடுக்கவும். உங்கள் எழுத்துருக்கள் செங்குத்து உரையில் சரியாக ரெண்டர் ஆகின்றனவா என்பதைச் சோதிக்கவும்.
- அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள். உங்கள்
writing-modeபயன்பாடு மாற்றுத்திறனாளி பயனர்களுக்கான அணுகல்தன்மையை எதிர்மறையாக பாதிக்கவில்லை என்பதை உறுதிப்படுத்தவும். - வெவ்வேறு உலாவிகள் மற்றும் சாதனங்களில் உங்கள் தளவமைப்புகளைச் சோதிக்கவும். உங்கள் தளவமைப்புகள் வெவ்வேறு தளங்களில் சரியாக ரெண்டர் ஆகின்றனவா என்பதை உறுதிப்படுத்தவும்.
- விற்பனையாளர் முன்னொட்டுகளைக் கையாள CSS ப்ரீப்ராசசர்கள் அல்லது Autoprefixer ஐப் பயன்படுத்தவும். இது உங்கள் நேரத்தையும் முயற்சியையும் மிச்சப்படுத்தும் மற்றும் உங்கள் CSS பழைய உலாவிகளுடன் இணக்கமாக இருப்பதை உறுதி செய்யும்.
- உள்ளடக்கத்தை விளக்கக்காட்சியிலிருந்து பிரிக்கவும். உங்கள் உள்ளடக்கத்தின் விளக்கக்காட்சியைக் கட்டுப்படுத்த CSS ஐப் பயன்படுத்தவும் மற்றும் ஸ்டைலிங் நோக்கங்களுக்காக HTML ஐப் பயன்படுத்துவதைத் தவிர்க்கவும்.
writing-mode ஐப் பயன்படுத்தும் உலகளாவிய வலைத்தளங்களின் எடுத்துக்காட்டுகள்
உலகெங்கிலும் உள்ள பல வலைத்தளங்கள் RTL மொழிகளுக்கு ஏற்ப மாற்றுவது முதல் பார்வைக்கு தனித்துவமான தளவமைப்புகளை உருவாக்குவது வரை பல்வேறு நோக்கங்களுக்காக writing-mode ஐப் பயன்படுத்துகின்றன. இதோ சில எடுத்துக்காட்டுகள்:
- அரபு அல்லது ஹீப்ரு செய்தி வலைத்தளங்கள்: இந்த வலைத்தளங்கள் உரையை சரியாகக் காண்பிக்க
direction: rtlமற்றும் சாத்தியமானwriting-modeமாற்றங்களைப் பயன்படுத்துகின்றன. - ஜப்பானிய மற்றும் சீன கலை மற்றும் கலாச்சார வலைத்தளங்கள்: தலைப்புகள், மெனுக்கள் மற்றும் அலங்கார கூறுகளுக்கு செங்குத்து எழுத்தை அடிக்கடி இணைக்கின்றன.
- பேஷன் பத்திரிகைகள்: ஸ்டைலிஸ்டிக் விளைவுகளுக்காக காட்சி தளவமைப்புகளில் செங்குத்து உரையை அடிக்கடி பயன்படுத்துகின்றன.
முடிவுரை
CSS writing-mode என்பது சர்வதேசமயமாக்கப்பட்ட மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய வலைத்தளங்களை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். பண்புக்கூறின் வெவ்வேறு மதிப்புகளையும் அது மற்ற CSS பண்புகளுடன் எவ்வாறு ஊடாடுகிறது என்பதையும் புரிந்துகொள்வதன் மூலம், வெவ்வேறு உரை திசைகளுக்கு ஏற்ப மாறும் தளவமைப்புகளை நீங்கள் உருவாக்கலாம் மற்றும் உலகளாவிய பார்வையாளர்களுக்கான பயனர் அனுபவத்தை மேம்படுத்தலாம். உங்கள் வலைத்தளங்கள் அனைத்து பயனர்களுக்கும் அணுகக்கூடியதாகவும் பார்வைக்கு ஈர்க்கக்கூடியதாகவும் இருப்பதை உறுதிசெய்ய அணுகல்தன்மை, உலாவி இணக்கத்தன்மை மற்றும் எழுத்துருத் தேர்வு ஆகியவற்றைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள்.
வலை மேம்பாடு தொடர்ந்து உருவாகி வருவதால், writing-mode போன்ற நுட்பங்களைக் கையாள்வது உண்மையான உலகளாவிய மற்றும் உள்ளடக்கிய ஆன்லைன் அனுபவங்களை உருவாக்குவதற்கு பெருகிய முறையில் முக்கியத்துவம் பெறுகிறது. சர்வதேசமயமாக்கலின் சக்தியைத் தழுவி, உலகின் அனைத்து மூலைகளிலிருந்தும் பயனர்களுடன் எதிரொலிக்கும் வலைத்தளங்களை உருவாக்கவும்.